<template>
  <div class="box">
    <Table
      :tableData="tableData"
      :tableColumn="tableColumn"
      :tableCellWidth="tableCellWidth"
      :tableCellAlign="tableCellAlign"
      :tableShowTooltip="tableShowTooltip"
      :tableEdit="tableEdit"
      :tableShowPagination="tableShowPagination"
      :paginationObj="paginationObj"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <!-- 自定义单元格 -->
      <template #EndDate="scope">
       <el-button>
        {{  scope.row.EndDate }}
       </el-button>
      </template>
    </Table>
  </div>
</template>
  <script>
import Table from "@/components/ability-components/table.vue";

export default {
  name: "home-demo",
  data() {
    return {
      paginationObj: {
        page: 1,
        size: 10,
        total: 100,
      },
      tableShowPagination: true,
      tableEdit: {
        isShowEdit: true,
        align: "center",
        tableEditArr: [
          {
            icon: "",
            text: "详情",
            type: "text",
            cb: ({ row }) => {
              // 做逻辑处理
              console.log(row);
            },
          },
        ],
      },
      tableShowTooltip: [
        {
          prop: "ClientName",
          showTooltip: false,
        },
      ],
      tableCellAlign: [
        {
          prop: "ClientName",
          align: "center",
        },
        {
          prop: "StatusDesc",
          align: "right",
        },
      ],
      tableCellWidth: [
        {
          prop: "ClientName",
          width: "200",
        },
        {
          prop: "StatusDesc",
          width: "80",
        },
      ],
      tableColumn: [
        {
          prop: "ClientName",
          label: "客户名称",
        },
        {
          prop: "BrandName",
          label: "品牌",
        },
        {
          prop: "EndDate",
          label: "报备有效期",
          slot: true,
        },
        {
          prop: "ModifyDate",
          label: "修改日期",
        },
        {
          prop: "StatusDesc",
          label: "报备状态",
        },
      ],
      tableData: [
        {
          Key: "阿特斯光伏科技(苏州）有限公司",
          ID: "F825480F-C76B-42BE-A63C-60D5DB06D471",
          ClientID: "Ep20210820006",
          ClientName: "阿特斯光伏科技(苏州）有限公司",
          BrandName: "SGMICRO(圣邦微)",
          EndDate: "2024-06-21 15:44:21",
          StatusDesc: "失败",
        },
        {
          Key: "艾伏新能源科技（上海）股份有限公司",
          ID: "972B99F5-680E-4FE9-9678-CA0BED6A162B",
          ClientID: "E7F2265FD7221404544F62C2D979207B",
          ClientName: "艾伏新能源科技（上海）股份有限公司",
          BrandName: "SGMICRO(圣邦微)",
          EndDate: "2024-06-21 15:44:21",
          StatusDesc: "失败",
        },
        {
          Key: "艾康生物技术（杭州）有限公司",
          ID: "A00A24F2-CC9A-4E09-9018-CE48E44D1DF8",
          ClientID: "17A36017D2C9E86D7C4B1D7D2C6C5C62",
          ClientName: "艾康生物技术（杭州）有限公司",
          BrandName: "TKD(泰晶)",
          EndDate: "2024-06-21 15:44:10",
          StatusDesc: "失败",
        },
        {
          Key: "艾欧创想智能科技(武汉)有限公司",
          ID: "B620DECB-B3CF-4DC5-9776-C03718C2E4E5",
          ClientID: "E83DABD28B5D7A2487BCF3656FA61CE7",
          ClientName: "艾欧创想智能科技(武汉)有限公司",
          BrandName: "SGMICRO(圣邦微)",
          EndDate: "2024-06-21 15:44:21",
          StatusDesc: "失败",
        },
      ],
    };
  },
  components: {
    Table,
  },
  methods: {
    handleSizeChange(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      console.log(val);
    },
  },
  created() {},
};
</script>
  <style lang="scss" scoped>
.box {
  width: 80%;
  margin: 0 auto;
}
</style>
  